<template>
  <div class="mg_set_message">
    <!-- mg_set_message 为本vue（含组件）内的样式域 -->
    <div style="width: 2.5rem;height: 0" ref="width2rem"></div>
    <div v-show="!showWritePhoneQQ && !showSendImage">
      <!--top-->
      <div class="top-header border-bottom fixed-top">
        <div class="top-back">
          <a href="javascript:history.go(-1)">返回</a>
        </div>
        <h2 class="f36 color-000">{{gameName}}</h2>
        <div class="top-right">
          <a href="/index.html" class="back-home"></a>
        </div>
      </div>
      <!--风控警告提示  -->
      <FkRemind class="Mmt-80 "></FkRemind>

      <!--填写商品信息-->
      <div class="order-container Mmt-175 bg-fff color-000 f30 border-bottom">
        <span class="">商品类型</span>
        <span class="input">{{goodsType}}</span>
      </div>

      <div class="order-container bg-fff f30 color-000  border-bottom">
        <span class="">游戏区服</span>
        <span class="input">{{showServer}}</span>
      </div>
      <!-- 账号发布信息填写 -->
      <v-write-account :TYPE="TYPE" :showHint="showHint" :accountClass="accountClass" :propertyArr="propertyArr" :verifyArr="verifyArr" :MIN_PRICE="MIN_PRICE" :sellerSafeConfigModel="sellerSafeConfigModel" :writing="writing" :serviceCharge="serviceCharge" @changePropertyChoose="changePropertyChoose"></v-write-account>
      <!-- 单选多选 -->
      <v-select-item :TYPE="TYPE" :chooseProperty="chooseProperty" :show="showChoose" @selectPropertyConfirm="selectPropertyConfirm" @changeItem="changeItem" @close="selectItemClose"></v-select-item>
      <!--底部确认是否发布商品-->
      <div class="release mt-30 trlect-btn">
        <a class="next" @click="nextSet2"><input class="bg-f54" type="button" name="" value="下一步"></a>
      </div>
    </div>
    <!-- 上传图片 -->
    <div v-show="showSendImage">
      <v-send-image :initImages="initImages" @imageUploadBack="showSendImage=false" @imageUploadConfirm="imageUploadConfirm">
      </v-send-image>
    </div>
    <!-- 填写手机号 和 qq号 -->
    <div v-if="showWritePhoneQQ">
      <v-write-phone :writing="writing" :isBindIdNumber="isBindIdNumber" :common="common" @changeBind="isBindIdNumber = true" @writePhoneQQConfirm="writePhoneQQConfirm" @writePhoneQQBack="writePhoneQQBack"></v-write-phone>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import selectItem from './sell_component/select_item.vue'
import writeMessageAccount from './sell_component/write_message_account.vue'
import writePhoneQQ from './sell_component/write_phone_qq.vue'
import sendImage from './sell_component/upload.vue'
import FkRemind from 'components/common/FkRemind';
export default {
  data() {
    return {
      categoryId: '', // 新大类id
      MIN_PRICE: 13, // 单笔出售的最低价格
      TYPE: { RADIO: 1, MULTIPLE: 2, TEXT: 3, NUMBER: 4, PASSWORD: 5, TEXTAREA: 99 }, // 动态属性固定值，单选，多选，文本，数字, 密码，多行文本
      showAxmRole: false, // 是否显示安心买规定
      showChoose: false, // 是否显示选择动态属性弹窗
      showSendImage: false, // 是否显示 上传图片组件
      showWritePhoneQQ: false, // 是否显示填写手机号码和qq号码组件
      showHint: false, // 校验显示哪些属性为空
      sellerSafeConfigModel: null, // 卖家保险配置
      isBindIdNumber: null, // 是否实名认证
      /* ----- 账号的信息 ------ */
      propertyArr: null, // 动态属性列表
      verifyArr: null, // 验证信息
      chooseProperty: null,
      images: [],
      initImages: [], // 编辑初始化图
      accountClass: {
        axm: null,
        title: '',
        price: ''
      },
      /* ----- end ------ */
      common: {
        phone: '',
        qq: '',
      },
      writing: {
        price: false,
        qq: false,
        phone: false
      },
      gameName: '', // 游戏名
      showServer: '', // 游戏区服
      goodsType: '', // 商品类型
      BizOfferTypeId: '', // 旧大类
      CategoryId: '', // 新大类
      isQuick: this.$route.query.isQuick, // 是否快捷发布
      query: this.$route.query,
      isBaopeiSafe: false, // 找回包赔
      icon: 'icon_down fr',//新增防骗提醒样式
      icon1: 'icon1_style',
      icons: 1,
    }
  },
  computed: {
    // 所需平台服务费
    serviceCharge() {
      let price = this.accountClass.price
      if (price < 30) {
        return '8'
      } else {
        let ret = Math.ceil(price / 100) * 10 + 5
        if (ret > 1000) ret = 1000
        return ret
      }
    }
  },
  components: {
    FkRemind,
    'v-send-image': sendImage, // 上传图片组件
    'v-write-phone': writePhoneQQ, // 填写手机号和QQ号组件
    'v-select-item': selectItem, // 单选多选组件
    'v-write-account': writeMessageAccount // 游戏账号动态属性填写组件
  },
  mounted() {
    this.dataInit()
    this.common.phone = this.$getAccountInfo().mobilePhone || '' // 初始化手机号
  },
  beforeDestroy() {
    this.$indicator.close()
  },
  methods: {
    // 防骗提醒
    warning: function () {
      if (this.icons == 1) {
        this.icon = 'icon_up fr'
        this.icon1 = 'f24  fl';
        this.icons++;
      } else {
        this.icon = 'icon_down fr '
        this.icon1 = 'icon1_style'
        this.icons = 1;
      }
    },
    /* 完善资料返回 */
    writePhoneQQBack() {
      if (!this.query.isQuick) // 非快捷发布返回则是返回到上传图片页面
        this.showSendImage = true
      this.showWritePhoneQQ = false
    },
    /* ------------------------------ 三个下一步 ----------------------- */
    /* 填写手机号码和qq号码 确认完成 */
    writePhoneQQConfirm() {
      this.$indicator.open({ spinnerType: 'fading-circle' })
      let params = {
        title: this.accountClass.title, // 商品标题
        price: this.accountClass.price, // 商品价格
        isSellerSafe: !!this.accountClass.axm, // 是否购买卖家保险
        contactQQ: this.common.qq, // 联系QQ
        contactMobile: this.common.phone, // 联系电话
        gameId: this.query.gameId, // 游戏ID
        gamePlatformId: this.query.plantId, // 平台ID
        goodsType: 6, // 商品类型
        gameServerId: this.query.serverId, // 游戏区服
        operatorId: this.query.clientId, // 运营商ID
        bizOfferTypeId: this.bizOfferTypeId, // 旧大类
        categoryId: this.categoryId, // 新大类
        availableDay: 33, // 发布期限
        sourceChannel: 2, // 商品来源 app3 M2
        bizCategoryPropertyVerList: this._turnPropertyToParams(false), // 动态属性
        gameProVerList: this._turnPropertyToParams(undefined), // 验证信息
        imageList: this.images, // 缩略图&原图
        isBaopeiSafe: !!this.isBaopeiSafe, // 找回包赔
        // gameAccount: '', // 游戏账号
        // gamePassword: '' , // 游戏密码
        // gameRoleLevel: '', // 角色等级
        // gameRole: [], // 角色名称
        // description: '' // 商品描述
        ...this._turnPropertyToParams(true)
      }
      if (this.query.editor) {
        params.bizOfferId = this.query.goodsId
        this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gameaccount/editAccount', params).then(({ data: res }) => {
          if (res.responseStatus.code === '00') {
            this.$router.push({ name: 'MGSellSuccessAccount', query: { goodsId: this.query.goodsId } })
          } else {
            this.$toast(res.responseStatus.message)
          }
        }).then(() => {
          this.$indicator.close()
        })
      } else {
        this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gameaccount/createAccount', params).then(({ data: res }) => {
          if (res.responseStatus.code === '00') {
            this.$router.push({ name: 'MGSellSuccessAccount', query: { goodsId: res.data } })
          } else {
            this.$toast(res.responseStatus.message)
          }
        }).then(() => {
          this.$indicator.close()
        })
      }
    },
    /* 图片上传完成点击下一步 */
    imageUploadConfirm(list) {
      this.images = list
      this.showSendImage = false
      this.showWritePhoneQQ = true
    },
    /* 填写动态属性后，点击下一步触发 */
    nextSet2() {
      let ok = true
      this.writing.price = true // 价格空提示开
      /* 校验 常规必填信息 */
      for (let key in this.accountClass) {
        /* 数字类型都是统一用文本代替， 如果值为空以及axm没有选择 则无法进入下一步*/
        if (key === 'axm') { // 安心买条件优先
          if (this.accountClass.axm === null && this.sellerSafeConfigModel && Number(this.sellerSafeConfigModel.sellerSafeSwitch) !== 1) ok = false // 两个条件需区分，如果是axm则要避免走下面的判断
          continue
        }
        if (!this.accountClass[key] || this.accountClass[key] === '') { // 空值判断
          ok = false
          continue
        }
        if (key === 'price' && Number(this.accountClass.price) < this.MIN_PRICE) // 非空值判断
          ok = false
      }
      /* 校验 动态属性必填信息 */
      if (this.propertyArr.some(property => {
        // 验证信息校验
        if (property.verify && property.regex && property.inputText.length) {
          return !new RegExp(property.regex).test(property.inputText)
        }
        // 数字范围校验
        if (property.controlType == this.TYPE.NUMBER && property.inputNum.length && (Number(property.inputNum) > property.scope.maxValue || Number(property.inputNum) < property.scope.minValue)) {
          console.log('文本范围错误')
          return true
        }
        // 空值校验
        if (property.isRequired) {
          switch (property.controlType) {
            case this.TYPE.RADIO:
            case this.TYPE.MULTIPLE:
              if (!property.showValue.length) {
                return true
              }
              break
            case this.TYPE.TEXT:
            case this.TYPE.PASSWORD:
            case this.TYPE.TEXTAREA:
              if (!property.inputText.length) {
                return true
              }
              break
            case this.TYPE.NUMBER:
              if (!property.inputNum.length) {
                return true
              }
              break
          }
        }
        return false
      })) ok = false
      if (!ok) {
        this.showHint = true
        this.$nextTick(() => {
          document.documentElement.scrollTop = document.querySelector('.mg_set_message .write_message_account .contaner-qq').offsetTop - this.$refs['width2rem'].offsetWidth
        })
        return
      }
      if (!this.isQuick) {
        this.showSendImage = true
      } else {
        this.showWritePhoneQQ = true
      }
    },
    /* ------------------------------ 账号发布数据管理 ----------------------- */
    /* 动态属性选择-多选框-确定按钮点击 */
    selectPropertyConfirm(property) {
      property.showValue = ''
      property.values.forEach(v => {
        if (v.checked) property.showValue += ((property.showValue.length ? ',' : '') + v.value)
      })
      this.showChoose = false
    },
    /* 动态属性属性值改变*/
    changeItem({ property, item, type }) {
      if (property.propertyName === '帐号绑定' && item.value === '无绑定') {
        property.values.map(v => v.checked = false)
      } else if (property.propertyName === '帐号绑定') {
        property.values.map(v => {
          if (v.value == '无绑定')
            v.checked = false
        })
        // item.listSon.filter(v => v.propertyName === '无绑定')[0].checked = false
      }

      if (type === this.TYPE.RADIO) { // 单选
        property.values.map(v => v.checked = false)
        item.checked = true
        property.showValue = item.value
        this.showChoose = false
      } else { // 多选
        item.checked = !item.checked

      }
    },
    /* 关闭动态属性选择 */
    selectItemClose() {
      this.showChoose = false
    },
    /* 筛选点击重置, 或是手动清理 */
    filterClear(item) {
      if (item) { // 手动清理某一项选中状态
        item.listSon.map(v => v.checked = false)
        return
      }
      this.filter.list.map(v => {
        v.listSon.map(v => v.checked = false)
        /* 清理输入框中的值 */
        if (v.type === this.filter.TYPE.RANGE) {
          v.maxValue = v.minValue = ''
        }
      })
    },
    /* 动态属性选择 */
    changePropertyChoose(property) {
      this.chooseProperty = property
      this.showChoose = true
    },
    /* ------------------------------ end ----------------------------------*/
    /* 初始化数据获取 */
    dataInit() {
      this.$indicator.open()
      // 编辑
      if (this.query.editor) {
        this.isBindIdNumber = true // 已实名认证
        Promise.all([
          /* 编辑初始化接口 */
          this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gameaccount/initEditAccount', {
            bizOfferId: this.query.goodsId
          }).then(({ data }) => {
            if (data.success === false) {
              this.$toast(data.responseStatus.message)
              return
            }
            let result = data
            result = result.data
            this.sellerSafeConfigModel = result.sellerSafeConfigModel
            // 常规参数初始化
            this.goodsType = result.bizOfferTypeName // 游戏类型
            this.gameName = result.gameName // 游戏名
            this.showServer = result.gamePlatformName + '/' + result.operatorName + '/' + result.gameServerName // 区服
            this.initImages = result.imgList // 图片
            this.accountClass.title = result.title // 标题
            this.accountClass.price = result.price // 价格
            this.accountClass.axm = result.isSellerSafe // 卖家保险
            this.common.phone = result.contactMobile // 手机号码
            this.common.qq = result.contactQQ // qq号码
            this.isBaopeiSafe = result.isBaopeiSafe // 找回包赔
            // end
            let propertyArr = result.bizCategoryPropertyList || [] // 普通动态属性列表
            let propertyArrValue = result.bizCategoryPropertyVerList || [] // 动态属性值
            this.propertyArr = propertyArr.map(v => { // 普通动态属性添加进 propertyArr
              let value = propertyArrValue.filter(ele => ele.key === v.appCategoryProperty.fieldName)[0]
              if (value) v.appCategoryProperty.value = value.value
              /* 加工数据 */
              return this._turnProperty(v)
            })
            result.gameRole = result.gameRole || []
            /* 固定动态属性 游戏账号、游戏密码、角色等级、角色名*/
            let fixedPropertyArr = [
              {
                name: '游戏帐号',
                fieldName: 'gameAccount',
                propertyType: 3,
                isRequired: true,
                value: result.gameAccount,
              }, {
                name: '游戏密码',
                fieldName: 'gamePassword',
                propertyType: 5,
                isRequired: true
              }, {
                name: '角色等级',
                fieldName: 'gameRoleLevel',
                propertyType: 4,
                isRequired: true,
                value: result.gameRoleLevel
              }, {
                name: '角色名1',
                fieldName: 'gameRole',
                propertyType: 3,
                isRequired: false,
                value: result.gameRole[0]
              }, {
                name: '角色名2',
                fieldName: 'gameRole',
                propertyType: 3,
                isRequired: false,
                value: result.gameRole[1]
              }, {
                name: '角色名3',
                fieldName: 'gameRole',
                propertyType: 3,
                isRequired: false,
                value: result.gameRole[2]
              }, {
                name: '商品描述',
                fieldName: 'description',
                propertyType: 99,
                isRequired: true,
                value: result.description
              }]
            if (fixedPropertyArr[0]) fixedPropertyArr[0].fixedFirst = true // 标记第一个固定动态属性，便于样式处理
            this.propertyArr.push(...fixedPropertyArr.map((v) => { // 固定动态属性添加进 propertyArr
              v.fixed = true // 用户标记固定动态属性
              /* 加工数据 */
              return this._turnProperty(v, true)
            }))
            // 验证类型的动态属性
            if (result.gameProList && result.gameProList.length !== 0) {
              let verifyArr = result.gameProList
              verifyArr[0].verifyFirst = true // 标记第一个验证属性
              verifyArr = verifyArr.map((v) => { // 固定动态属性添加进 propertyArr
                // let value = result.gameProVerList.filter(ele => ele.key === v.field)[0]
                // if (value) v.appCategoryProperty.value = value.value
                /* 加工数据 */
                return this._turnVerify(v)
              })
              this.propertyArr.push(...verifyArr)
            }
            this.bizOfferTypeId = result.bizOfferTypeId // 旧大类
            this.categoryId = result.categoryId // 新大类
          }),
          /* 获取是否实名认证 */
          this.$http.post('/api/mobile-user-service/rs/account/checkUserBindIdNumber', { getIdNumber: false }).then(res => {
            this.isBindIdNumber = res.data.isBindIdNsumber
          })
        ]).then(() => {
          this.$indicator.close()
        })
      } else {
        this.goodsType = this.query.goodsTypeName // 游戏名配置
        this.gameName = this.query.gameName // 游戏名配置
        this.showServer = this.query.showServer // 游戏名配置
        // 发布
        Promise.all([
          /* 发布初始化接口 */
          this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gameaccount/initCreateAccount', {
            gameId: this.query.gameId,
            platformName: this.query.plantName,
            operatorId: this.query.clientId,
            gameServerId: this.query.serverId,
            categoryId: this.query.categoryId
          }).then(({ data }) => {
            if (data.success === false) {
              this.$toast(data.responseStatus.message)
              return
            }
            let result = data
            result = result.data
            this.sellerSafeConfigModel = result.sellerSafeConfigModel
            this.isBaopeiSafe = result.isBaopeiSafe // 找回包赔
            if (this.sellerSafeConfigModel && this.sellerSafeConfigModel.sellerSafeSwitch == 3) {
              this.accountClass.axm = true
            }
            let propertyArr = result.bizCategoryPropertyList || [] // 普通动态属性列表
            this.propertyArr = propertyArr.map(v => { // 普通动态属性添加进 propertyArr
              /* 加工数据 */
              return this._turnProperty(v)
            })
            /* 固定动态属性 游戏账号、游戏密码、角色等级、角色名 */
            let fixedPropertyArr = [
              {
                name: '游戏帐号',
                fieldName: 'gameAccount',
                propertyType: 3,
                isRequired: true
              }, {
                name: '游戏密码',
                fieldName: 'gamePassword',
                propertyType: 5,
                isRequired: true
              }, {
                name: '角色等级',
                fieldName: 'gameRoleLevel',
                propertyType: 4,
                isRequired: true
              }, {
                name: '角色名1',
                fieldName: 'gameRole',
                propertyType: 3,
                isRequired: false
              }, {
                name: '角色名2',
                fieldName: 'gameRole',
                propertyType: 3,
                isRequired: false
              }, {
                name: '角色名3',
                fieldName: 'gameRole',
                propertyType: 3,
                isRequired: false
              }, {
                name: '商品描述',
                fieldName: 'description',
                propertyType: 99,
                isRequired: true
              }]
            if (fixedPropertyArr[0]) fixedPropertyArr[0].fixedFirst = true // 标记第一个固定动态属性，便于样式处理
            this.propertyArr.push(...fixedPropertyArr.map((v) => { // 固定动态属性添加进 propertyArr
              v.fixed = true // 用户标记固定动态属性
              /* 加工数据 */
              return this._turnProperty(v, true)
            }))
            if (result.gameProList && result.gameProList.length !== 0) {
              let verifyArr = result.gameProList
              verifyArr[0].verifyFirst = true // 标记第一个验证属性
              verifyArr = verifyArr.map((v) => { // 固定动态属性添加进 propertyArr
                /* 加工数据 */
                return this._turnVerify(v)
              })
              this.propertyArr.push(...verifyArr)
            }
            this.bizOfferTypeId = result.bizOfferTypeId // 旧大类
            this.categoryId = result.categoryId // 新大类
          }),
          /* 获取是否实名认证 */
          this.$http.post('/api/mobile-user-service/rs/account/checkUserBindIdNumber', { getIdNumber: false }).then(res => {
            this.isBindIdNumber = res.data.isBindIdNsumber
          })
        ]).then(() => {
          this.$indicator.close()
        })
      }

    },
    /* 把动态属性转为创建订单的请求参数 */
    _turnPropertyToParams(fixed) {
      // false 动态属性    null 验证信息   true 固定属性
      let params = fixed ? {} : []
      this.propertyArr.filter(property => property.fixed === fixed).map(property => {
        let obj = {
          key: property.paramsPropertyName,
        }
        switch (property.controlType) {
          case this.TYPE.RADIO:
          case this.TYPE.MULTIPLE:
            obj.value = property.showValue
            break
          case this.TYPE.TEXT:
          case this.TYPE.PASSWORD:
          case this.TYPE.TEXTAREA:
            obj.value = property.inputText
            break
          case this.TYPE.NUMBER:
            obj.value = property.inputNum
            break
        }
        if (obj.value.length === 0) return
        if (fixed) {
          if (obj.key === 'gameRole') { // 角色名
            params[obj.key] = params[obj.key] || []
            params[obj.key].push(obj.value)
          } else {
            params[obj.key] = obj.value
          }
          return params
        }
        params.push(obj)
      })
      return params
    },
    /* 转化验证信息 */
    _turnVerify(obj) {
      return {
        hint: false, // 是否显示提示信息
        verify: true, // 标记为 ‘验证属性’
        verifyFirst: !!obj.verifyFirst, // 是否是第一个验证属性
        propertyName: obj.title, // 动态属性名
        paramsPropertyName: obj.field, // 创建商品时传递的名称
        controlType: 3, // 动态属性类型 1单选框 2 多选框 3 文本 4 数字 5 密码
        isRequired: obj.isRequire, // 是否是必填项
        inputText: '', // 文本类型的值
        inputLen: 50, // 文本类型限制的长度
        regex: obj.valiadRegex,
        values: '',
        inputNum: '', // 数字类型的值
        showValue: '', // 界面中显示的选中的动态属性值（多选和单选）
      }
    },
    /* 动态属性数据加工 */
    _turnProperty(item, fixed) {
      let obj = {}
      if (fixed) {
        obj = item
      } else {
        obj = item.appCategoryProperty
        obj.propertyVal = item.names
      }
      if (obj.textMaxLength === '' || obj.textMaxLength === null || obj.textMaxLength === undefined) obj.textMaxLength = 50
      let ret = {
        hint: false, // 是否显示提示信息
        fixed: !!obj.fixed, // 是否是固定动态属性
        fixedFirst: !!obj.fixedFirst, // 是否是第一个固定动态属性
        propertyName: obj.name, // 动态属性名
        paramsPropertyName: obj.fieldName, // 创建商品时传递的名称
        controlType: obj.propertyType, // 动态属性类型 1单选框 2 多选框 3 文本 4 数字 5 密码
        isRequired: obj.isRequired, // 是否是必填项
        inputText: '', // 文本类型的值
        inputLen: obj.textMaxLength, // 文本类型限制的长度
        inputNum: '', // 数字类型的值
        scope: {
          minValue: Number(obj.minNumber),
          maxValue: Number(obj.maxNumber)
        },
        showValue: '', // 界面中显示的选中的动态属性值（多选和单选）
        values: obj.propertyVal ? obj.propertyVal.map(item => { // 动态属性值
          return {
            value: item, // 选项名
            checked: false // 是否被选中，默认是false
          }
        }) : ''
      }
      if (!obj.value) return ret
      // 如果有值，则进行赋值（针对编辑）
      switch (ret.controlType) {
        case this.TYPE.RADIO:
        case this.TYPE.MULTIPLE:
          ret.showValue = obj.value
          ret.values.forEach(ele => { if (obj.value.split(',').some(val => val === ele.value)) ele.checked = true })
          break
        case this.TYPE.TEXT:
        case this.TYPE.PASSWORD:
        case this.TYPE.TEXTAREA:
          ret.inputText = obj.value
          break
        case this.TYPE.NUMBER:
          ret.inputNum = obj.value
          break
      }
      return ret
    },
    ...mapActions({
      // createAccountGoods: 'MOBILE_GAME/SELL_CREATE_ACCOUNT_GOODS', // 创建账号商品
      // getProperty: 'MOBILE_GAME/SELL_PROPERTY' // 获取动态属性接口
    })
  }
}
</script>

<style>
.mg_set_message .order-container .input {
  height: 0.6rem;
  width: 55%;
  border: none;
  position: absolute;
  font-size: 0.3rem;
  top: 0.24rem;
  left: 2.6rem;
  line-height: 0.6rem;
}
</style>

